<template>
    <div class="contextmenu" ref="contextmenuDocment" :style="menuStyle">
        <div v-for="(item, index) in contextMenu" :key="index">
            <template v-if="item.identification.includes(cmData)">
                <div class="contextmenuItems" :class="item.separate ? 'contextmenuItemsD' : ''" @click="item.click">
                    <i class="menuIcons" :class="item.icon" v-if="item.icon"></i>
                    {{ item.name }}
                </div>
            </template>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, ref, reactive, nextTick } from "vue";
import { contextMenu } from "@/config/config";
import { widgetStore } from "@/stores/widget";
const widget = widgetStore();
const cmDataX = computed(() => {
    return widget.contextMenu.X;
});
const cmDataY = computed(() => {
    return widget.contextMenu.Y;
});
const cmData = computed(() => {
    return widget.contextMenu.type;
});
const menuStyle: any = reactive({});
const contextmenuDocment: any = ref(null);

nextTick(() => {
    if (contextmenuDocment) {
        // 菜单的高度
        const contextmenuDocmentHeight = contextmenuDocment.value.offsetHeight;
        // 菜单的宽度
        const contextmenuDocmentWidth = contextmenuDocment.value.offsetWidth;
        // 判断是否在屏幕内能全部显示菜单列表
        // 可视区域的高度
        const winHeight = window.innerHeight;
        // 可视区域的宽度
        const winWidth = window.innerWidth;
        if (cmDataY.value + contextmenuDocmentHeight > winHeight) {
            // 如果高度不能全部显示，则显示在鼠标上方
            menuStyle.bottom = winHeight - cmDataY.value + "px";
        } else {
            menuStyle.top = cmDataY.value + "px";
        }
        if (cmDataX.value + contextmenuDocmentWidth > winWidth) {
            // 如果宽度不能全部显示，则显示在鼠标左侧
            menuStyle.right = winWidth - cmDataX.value + "px";
        } else {
            menuStyle.left = cmDataX.value + "px";
        }
    }
});
</script>
